require('./PageProgresstrack.styl');
import { Control } from 'react-keeper'
const classNames = require('classnames')
const reactMixin = require('react-mixin');
const Actions = require('./actions');
const Store = require('./store');
const { Timeline, Icon, Boxs, Badge } = SaltUI;
const { HBox, Box } = Boxs
const ui = require('clientConfig/util/jsapi/ui');
class Progresstrack extends React.Component {
    static defaultProps = {
        badge_text: "已完成"
    }
    constructor(props) {
        super(props);
        this.state = {
            listData: []
        }
    }

    render() {
        let t = this;
        return (
            <div className="progresstrack">
                <Timeline>
                    {
                        this.state.listData.map((item, index) => {
                            return (
                                <div>
                                    <Timeline.Item className={classNames("my",{"last-timeline":index==this.state.listData.length-1&&item.content.length==0},{"circle-color":item.node_color=="green"},{"circle-color1":item.node_color=="red"})}>
                                        <span>{item.subject}</span>
                                        <span>{item.date}</span>
                                    </Timeline.Item>
                                    <div >
                                        {item.content.map((subitem, index) => {
                                            
                                            return (
                                                <Timeline.Item color={subitem.badge_text && subitem.badge_text.includes('超时')?"#e92c2c":(subitem.badge_text.includes('已完成')?"#19b663":"#b3b3b3")}>
                                                    <HBox vAlign="center">
                                                        <Box flex={3}>{subitem.title}<span></span></Box>
                                                        <Box flex={1} className="t-FAC t-MR10">
                                                            <Badge text={subitem.badge_text} className={classNames({ "badge-color-green": subitem.badge_text && subitem.badge_text.includes('已') },{ "badge-color-red": subitem.badge_text && subitem.badge_text.includes('超时') })} overflowCount >
                                                                <div ></div>
                                                            </Badge>
                                                        </Box>
                                                    </HBox>
                                                </Timeline.Item>
                                            )
                                        })}
                                    </div>
                                </div>
                            )
                        })
                    }
                </Timeline>
            </div>
        );
    }

    componentWillMount() {
        ui.setTitle({ title:"成果进度跟踪" });
    }

    componentDidMount() {
        let process_id = Control.state.process_id;
        Actions.fetch({process_id})
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
    }
}

reactMixin.onClass(Progresstrack, Reflux.connect(Store));

module.exports = Progresstrack;
